import { ref, onMounted } from "vue"
const docName = "traffic"
const ip = "localhost"
const port = 6163
const projection = "EPSG:4326"
export const useInitMap = (map, docLayer) => {
  //切换地图
  const toggleMap = (type) => {
    const layerArray = map.value.getLayers().getArray()
    if (type == "raster") {
      layerArray[0].setVisible(true)
      layerArray[1].setVisible(false)
    } else {
      layerArray[0].setVisible(false)
      layerArray[1].setVisible(true)
    }
  }
  //加载控件
  // 1.导航控件
  const zoomToExtent = new ol.control.ZoomToExtent({
    extent: [114, 30, 114, 32],
  })
  //2.比例尺控件
  var scaleLineControl = new ol.control.ScaleLine({
    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
    units: "metric",
  })
  //3.鹰眼控件
  //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
  var overviewMapControl = new ol.control.OverviewMap({
    //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
    className: "ol-overviewmap ol-custom-overviewmap",
    //鹰眼中加载同坐标系下不同数据源的图层
    layers: [imgLayergroup, vecLayergroup],
    //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
    collapseLabel: "\u00BB",
    //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
    label: "\u00AB",
    //初始为展开显示方式
    collapsed: false,
    view: new ol.View({
      projection,
      minZoom: 4,
      maxZoome: 18,
    }),
  })
  //4.zoomslider控件
  var zoomslider = new ol.control.ZoomSlider()
  onMounted(() => {
    map.value = new ol.Map({
      target: "map",
      layers: [imgLayergroup, vecLayergroup],
      view: new ol.View({
        center: [114.379, 30.496],
        zoom: 13,
        projection,
      }),
    })
    //地图文档
    docLayer.value = new Zondy.Map.Doc("", docName, {
      ip,
      port,
      crossOrigin: "Anonymous",
    })
    map.value.addLayer(docLayer.value)
    //5.鼠标控件
    //实例化鼠标位置控件
    var mousePositionControl = new ol.control.MousePosition({
      //坐标格式
      coordinateFormat: ol.coordinate.createStringXY(4),
      //地图投影坐标系
      projection,
      //坐标信息显示样式类名
      className: "custom-mouse-position",
      //显示鼠标位置信息的目标容器
      target: document.getElementById("mouse-position"),
      //未定义坐标的标记
      undefinedHTML: "&nbsp;",
    })
    map.value.addControl(zoomToExtent)
    map.value.addControl(scaleLineControl)
    map.value.addControl(overviewMapControl)
    map.value.addControl(zoomslider)
    map.value.addControl(mousePositionControl)
  })
  return {
    toggleMap,
    zoomToExtent,
    scaleLineControl,
    overviewMapControl,
    zoomslider,
    docName,
    ip,
    port,
    projection,
  }
}
